<template>
  <view class="dynamic-water-fall-card" :style="[getStyle]" @click.stop="toDynamicDetail">
    <oto-lazy-load-image
      :custom-style="{
        borderRadius: 0
      }"
      @loaded="loaded"
      :src="data.images | getImageList"
    />
    <view class="dynamic-content-body">
      <view class="dynamic-content">
        {{ data.content }}
      </view>
      <view class="topic-tips" v-if="data.type"> #{{ data.type | getTypeText }}# </view>
    </view>
    <view
      class="user"
      :style="{
        marginTop: data.type ? '14rpx' : '20rpx'
      }"
    >
      <image class="user-avatar" :src="userInfo.avatarUrl" mode="" />
      <text class="user-nickname">{{ userInfo.nickName }}</text>
      <view class="dynamic-read">
        <image class="dynamic-read-icon" :src="path.READ" />
        <text class="dynamic-read-text">{{ data.views | getThousandFormat }}</text>
      </view>
    </view>
  </view>
</template>

<script>
  import OtoLazyLoadImage from './oto-lazy-load-image.vue';
  import { dynamicTypeList } from '@/enum/dynamic.enum';
  import { DYNAMIC_DETAIL } from '@/constants/path';

  export default {
    components: {
      OtoLazyLoadImage
    },
    props: {
      data: {
        type: Object,
        default() {
          return {};
        }
      },
      customStyle: {
        type: Object,
        default() {
          return {};
        }
      },
      index: {
        type: Number,
        default: 0
      }
    },
    filters: {
      getImageList(images) {
        return String(images).split(',')[0];
      },
      getTypeText(type) {
        let text = '';
        dynamicTypeList.forEach((item) => {
          if (item.value === type) {
            text = item.text;
          }
        });
        return text;
      }
    },
    data() {
      return {
        style: {},
        path: DYNAMIC_DETAIL
      };
    },
    computed: {
      getStyle() {
        const _style = {};
        Object.assign(_style, this.style, this.customStyle);
        return _style;
      },
      userInfo() {
        return this.data.userInfo;
      }
    },
    methods: {
      toDynamicDetail() {
        if (!this.data || !this.data.id) {
          return console.log('不存在动态');
        }
        uni.navigateTo({
          url: `/module/dynamic/pages/DynamicDetail/index?id=${this.data.id}`
        });
      },
      loaded() {
        this.$emit('loaded');
      }
    }
  };
</script>

<style lang="scss" scoped>
  .dynamic-water-fall-card {
    width: 346rpx;
    border-radius: 16rpx;
    padding-bottom: 22rpx;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(204, 204, 204, 0.4);

    .dynamic-content-body {
      padding-left: 16rpx;
      padding-right: 16rpx;
    }

    .dynamic-content {
      margin-top: 16rpx;
      /* 主要正文 */

      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 28rpx;
      line-height: 39rpx;

      color: #000000;
    }

    .topic-tips {
      margin-top: 8rpx;
      display: inline-block;
      border-radius: 44rpx;
      font-size: 24rpx;
      color: #81d8de;
    }

    .user {
      margin-left: 16rpx;
      display: flex;
      align-items: center;
      position: relative;

      &-avatar {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
      }

      &-nickname {
        margin-left: 10rpx;
      }

      .dynamic-read {
        position: absolute;
        right: 16rpx;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;

        &-icon {
          width: 28rpx;
          height: 28rpx;
          margin-right: 5rpx;
        }

        &-text {
        }
      }
    }
  }
</style>
